<template>
	<view class="audio-visualizer">
		<view class="control-panel">
			<button @click="togglePlay" :class="{ 'active': isPlaying }">
				{{ isPlaying ? '暂停' : '播放' }}
			</button>
			<view class="speed-control">
				<text>速度: {{ speed }}%</text>
				<slider :value="speed" :min="50" :max="500" step="10" @change="onSpeedChange" />
			</view>
			<!-- <view class="style-control">
				<text>样式:</text>
				<picker mode="selector" :range="styleOptions" @change="onStyleChange">
					<view class="picker">{{ styleOptions[styleIndex] }}</view>
				</picker>
			</view> -->
		</view>

		<view class="chart-container">
			<view class="bar-group" :style="{ height: containerHeight + 'px' }">
				<view class="bar" v-for="(bar, index) in bars" :key="index" :style="{ 
            height: bar.height + 'px', 
            width: barWidth + 'px',
            marginRight: barMargin + 'px',
            backgroundColor: getBarColor(bar, index),
            borderRadius: barRadius + 'px'
          }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false,
				barCount: 20, // 柱状数量
				containerHeight: 50, // 容器高度(px)
				barWidth: 6, // 柱状宽度(px)
				barMargin: 2, // 柱状间距(px)
				barRadius: 3, // 柱状圆角(px)
				speed: 500, // 动画速度百分比
				styleIndex: 0, // 样式索引
				styleOptions: ['波浪', '随机', '脉冲'], // 样式选项
				bars: [], // 柱状数据
				animationId: null, // 动画ID
				baseHeight: 30, // 基础高度
				maxAmplitude: 150, // 最大振幅
				wavePhase: 0, // 波浪相位
			};
		},

		created() {
			this.initBars();
		},

		beforeDestroy() {
			this.stopAnimation();
		},

		methods: {
			// 初始化柱状数据
			initBars() {
				this.bars = Array(this.barCount).fill(0).map(() => ({
					height: this.baseHeight,
					targetHeight: this.baseHeight,
					speed: 0.1 + Math.random() * 0.2 // 每个柱子的变化速度
				}));
			},

			// 切换播放状态
			togglePlay() {
				this.isPlaying = !this.isPlaying;
				if (this.isPlaying) {
					this.startAnimation();
				} else {
					this.stopAnimation();
				}
			},

			// 修改后的 startAnimation 方法
			startAnimation() {
				this.stopAnimation();
				// 速度越快，间隔时间越短（公式：1000ms / (speed/基准值)，基准值越小速度上限越高）
				const interval = 1000 / (this.speed / 30); // 基准值30可调整
				this.animationId = setInterval(() => {
					this.updateBars();
				}, interval);
			},

			// 停止动画
			stopAnimation() {
				if (this.animationId) {
					clearInterval(this.animationId);
					this.animationId = null;
				}
			},

			// 更新柱状高度
			updateBars() {
				this.wavePhase += 0.1;

				this.bars = this.bars.map((bar, index) => {
					let targetHeight;

					// 根据不同样式计算目标高度
					switch (this.styleIndex) {
						case 0: // 波浪
							const waveValue = Math.sin(this.wavePhase + index * 0.3);
							targetHeight = this.baseHeight + ((waveValue + 1) / 2) * this.maxAmplitude;
							break;

						case 1: // 随机
							if (Math.random() < 0.1) { // 10%概率改变高度
								targetHeight = this.baseHeight + Math.random() * this.maxAmplitude;
							} else {
								targetHeight = bar.targetHeight;
							}
							break;

						case 2: // 脉冲
							const pulseValue = Math.sin(this.wavePhase + (index % 8) * 0.5);
							targetHeight = this.baseHeight + ((pulseValue + 1) / 2) * this.maxAmplitude;
							break;

						default:
							targetHeight = this.baseHeight;
					}

					// 平滑过渡到目标高度
					const newHeight = bar.height + (targetHeight - bar.height) * bar.speed;

					return {
						...bar,
						height: newHeight,
						targetHeight
					};
				});
			},

			// 获取柱状颜色
			getBarColor(bar, index) {
				const heightRatio = (bar.height - this.baseHeight) / this.maxAmplitude;

				// 根据高度和索引生成颜色
				switch (this.styleIndex) {
					case 0: // 波浪 - 蓝色渐变
						return `hsl(200, 80%, ${40 + heightRatio * 40}%)`;

					case 1: // 随机 - 彩虹色
						return `hsl(${(index * 5 + this.wavePhase * 20) % 360}, 80%, ${50 + heightRatio * 20}%)`;

					case 2: // 脉冲 - 红色渐变
						return `hsl(0, 80%, ${40 + heightRatio * 40}%)`;

					default:
						return '#3498db';
				}
			},

			// 速度变化处理
			onSpeedChange(e) {
				this.speed = e.detail.value;
				if (this.isPlaying) {
					this.startAnimation(); // 重新启动动画应用新速度
				}
			},

			// 样式变化处理
			onStyleChange(e) {
				this.styleIndex = e.detail.value;
			}
		}
	};
</script>

<style scoped>
	.audio-visualizer {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f7;
	}

	.control-panel {
		padding: 30rpx;
		background-color: white;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.control-panel button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #007aff;
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.control-panel button.active {
		background-color: #ff3b30;
	}

	.speed-control,
	.style-control {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.chart-container {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.bar-group {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: relative;
		width: 100%;
	}

	.bar {
		transition: height 1s ease-out;
	}
</style>